<template>
	<view class='JingangDistrict'>
		<view class='item' v-for="item in listArr" :key='item.label' @click='handleClick(item)' :style="{backgroundImage:`url(${item.bgc})`}">
			<view class='item-image'>
				<image class='item-image-size' :src="item.image" mode=""></image>
			</view>
			<view class="item-label">
				{{item.label}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'JingangDistrict',
		data() {
			return {
					listArr:[
						{
							// image: require('@/static/static-home/image-56.png'),
							bgc:require('@/static/static-home/pfs.png'),
							// label:'批发商',
							type:1
						},
						{
							// image: require('@/static/static-home/image-57.png'),
							bgc:require('@/static/static-home/jxs.png'),
							// label:'经销商',
							type:2
						},
						// {
						// 	image: require('@/static/static-home/image-3.png'),
						// 	label:'外卖红包'
						// },
						// {
						// 	image: require('@/static/static-home/image-4.png'),
						// 	label:'手机充值'
						// },
						// {
						// 	image: require('@/static/static-home/image-5.png'),
						// 	label:'加油打折'
						// },
						// {
						// 	image: require('@/static/static-home/image-6.png'),
						// 	label:'酒店住宿'
						// },
						// {
						// 	image: require('@/static/static-home/image-7.png'),
						// 	label:'特价影票'
						// },
						
					]
			}
		},
		methods:{
			handleClick(item){
			
				this.$emit("callback",item)
			}
		}
	}
</script>

<style scoped>
	.JingangDistrict {
		width:calc(100% - 60rpx);
		display: grid;/* 
		grid-template-columns: repeat(5, 1fr); */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 100rpx;
	}

	.JingangDistrict .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 49%;
		background-repeat: no-repeat;
		background-size: 100%;
		height: 196rpx;
	}

	.JingangDistrict .item .item-image {
		width: 72rpx;
		height: 72rpx;
	}
	.JingangDistrict .item .item-label {
		font-weight: 500;
		font-size: 24rpx;
		color: #3B3B3B;
	}

	.JingangDistrict .item .item-image .item-image-size {
		width: 72rpx;
		height: 72rpx;
	}
</style>